<template>
  <div class="about">
    <Tab />

    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="item in srcList" :key="item">
        <img :src="item.pic" />
      </van-swipe-item>
    </van-swipe>

    <icon-bar :list="iconlist" />

    <nav-more />

    <!-- <tabel-all /> -->
  </div>
</template>

<script>
import api from "../api/login";
import Tab from "../components/Tab";
import IconBar from "../components/IconBar";
import TabelAll from "../components/TabelAll";
import NavMore from "../components/NavMore";
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const all = reactive({
      srcList: [
        {
          src: "https://images.alphacoders.com/605/thumb-1920-605592.png",
        },
        {
          src: "https://images7.alphacoders.com/303/thumb-1920-303042.png",
        },
        {
          src: "https://images5.alphacoders.com/413/thumb-1920-413651.jpg",
        },
      ],
      iconlist: [],
    });
    console.log(all.srcList);
    return { ...toRefs(all) };
  },
  mounted() {
    this.getBanner();
    this.getBiao();
    console.log("能打印吗");
  },
  methods: {
    getBanner() {
      api
        .banner({
          type: 1,
        })
        .then((res) => {
          this.srcList = res.banners;
          // console.log(res.banners);
        });
    },
    getBiao() {
      api.biao().then((res) => {
        this.iconlist = res.data;
      });
    },
  },
  components: { Tab, IconBar, TabelAll, NavMore },
};
</script>
<style lang="less" scoped>
.van-swipe {
  width: 7.1rem;
  height: 3.5rem;
  border-radius: 6px;
  margin: 0 auto;
}

.van-swipe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>